<style>
    .thumb {
		width: 65px;
		height: 50px;
		border: 1px solid #000;
		margin: 10px 5px 0 0;
	}
	#entrada{
		float: left;
		position: absolute;
		width: 140px;
		height: 142px;
		cursor: pointer;
		background: URL('icon.jpeg');
		background-repeat: no-repeat;
	}
	
	#entrada:hover{
		opacity: 0.9;
	}
	
	#entrada input{
		width: 140px;
		height: 142px;
		cursor: pointer;
		opacity: 0;
	}
	#saida {
		margin-left: 160px;
		width: 380px;
		height: 134px;
		padding-left: 15px;
		border: dashed 3px;
		border-radius: 4px;
		border-color: black;
		color: black;
	}
</style>
<div id="fotos">
	<div id="entrada">
		<input type="file" id="files" name="files[]" multiple />
	</div>

	<div id="saida">
		<output id="list"></output>
	</div>
</div>
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>